<template>
  <view>
    <view class="device-head">
      <view class="device-search">
        <uni-easyinput
          style="width: 100%"
          class="uni-mt-5"
          trim="all"
          type="search"
          @confirm="searchConfirm"  
          @clear="searchConfirm"
          v-model="keyword"
          placeholder="请输入设备编号进行筛选"
        >
        </uni-easyinput>
      </view>
    </view>
    <view class="tab flex tc tb p-tb-25" :style="css.mbg">
      <view
        v-for="(item, index) in status"
        :key="index"
        :class="'col-' + status.length"
        @tap="setTab(index)"
      >
        <view :style="statusIndex == index ? css.tcmc : css.tcm">
          {{ item.name }}
          <view class="line" :style="statusIndex == index ? css.mcbg : 'bc-w'"></view>
        </view>
      </view>
    </view>
    <view class="device-total">当前设备数量：{{ total }} </view>
    <view class="device-list p-tb-30">
      <scroll-view
        scroll-y
        class="device-list-scroll"
        :scroll-top="scrollTop"
        :lower-threshold="200"
        :show-scrollbar="false"
        :scroll-with-animation="true"
        @scrolltolower="loadMore"
      >
        <view
          class="item br-10 m-lr-30 m-b-20 p-t"
          :style="css.mbg"
          v-for="item in deviceList"
          :key="item.id"
        >
          <view class="p-lr-30 p-tb-25 bl-b" :style="css.blpc">
            <view class="flex item-head">
              <view> 设备编号{{ item.code }} </view>
              <view class="m-l-auto" :class="'item-status' + item.status">
                {{ getStatusText(item.status) }}
              </view>
            </view>
            <view class="item-info flex">
              <view class="item-info-item">
                <image
                  :src="'https://pets.wx.bwicc.com/' + item.goods.image"
                  mode="widthFix"
                  style="width: 100rpx; height: 100rpx; margin-right: 20rpx"
                />
              </view>
              <view class="item-info-item">
                <view class="item-info-item-value">
                  {{ item.goods.name }}
                </view>
              </view>
            </view>
            <view class="item-btn">
              <button
                class="item-info-item-button"
                type="primary"
                size="mini"
                @tap="changeStatus(item)"
              >
                更改设备状态
              </button>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <view class="popup-content">
        <view class="popup-content-head">
          <view class="popup-content-item-title">
            <text class="popup-content-item-title-text">设备号：{{ editItem.code }}</text>
          </view>
        </view>
        <view class="popup-content-body">
          <view class="popup-content-item-title">
            更改设备状态：
            <view class="popup-content-item-title-item">
              <view class="popup-content-item-title-item-label">
                <uni-data-checkbox
                  v-model="editStatus"
                  mode="tag"
                  :localdata="statusList"
                ></uni-data-checkbox>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-content-footer">
          <button type="primary" size="mini" style="margin: 0" @tap="dialogInputConfirm">
            确定
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      deviceList: [],
      css: {},
      status: [
        { name: "全部", value: "-1" },
        { name: "可用", value: "0" },
        { name: "租用中", value: "1" },
        { name: "维修中", value: "2" },
        { name: "已损坏", value: "3" },
      ],
      statusIndex: 0,
      scrollTop: 0,
      page: 1,
      page_size: 20,
      is_no_more: false,
      editItem: null,
      statusList: [
        { text: "可用", value: "0" },
        { text: "租用中", value: "1" },
        { text: "维修中", value: "2" },
        { text: "已损坏", value: "3" },
      ],
      editStatus: null,
      total: 0,
      keyword: "",
    };
  },
  onPullDownRefresh() {
    this.deviceList = [];
    this.page = 1;
    this.is_no_more = false;
    this.loadData();
  },
  onLoad() {
    this.$xyfun.setNavBar();
    this.css = this.$xyfun.css();
    this.loadData();
  },
  methods: {
    
    searchConfirm() {
      this.deviceList = [];
      this.page = 1;
      this.is_no_more = false;
      this.loadData();
    },
    dialogInputConfirm() {
      let that = this;
      let status = this.editStatus;
      let id = this.editItem.id;
      let params = {
        id: id,
        status: status,
      };
      this.$api.post({
        url: "/staff/clerk/goods_code_save",
        data: params,
        success: (res) => {
          that.deviceList.forEach((item) => {
            if (item.id == id) {
              item.status = status;
            }
          });
          uni.showToast({
            title: "更改状态成功",
            icon: "none",
          });
          that.loadData();
          that.$refs.inputDialog.close();
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            title: "更改状态失败",
            icon: "none",
          });
        },
      });
    },
    getStatusText(status) {
      // 0=可用,1=租用中,2=维修中,3=已损坏
      let statusObj = {
        0: "可用",
        1: "租用中",
        2: "维修中",
        3: "已损坏",
      };
      return statusObj[status];
    },
    setTab(index) {
      this.statusIndex = index;
      this.deviceList = [];
      this.page = 1;
      this.is_no_more = false;
      this.loadData();
    },
    loadData() {
      let params = {
        page: this.page,
        page_size: this.page_size,
        status: this.status[this.statusIndex].value,
        keyword: this.keyword,
      };
      let that = this;
      this.$api.get({
        url: "/staff/clerk/goods_code_list",
        loadingTip: "加载中...",
        data: params,
        success: (res) => {
          if (res.data == 0) {
            that.is_no_more = true;
          } else {
            that.total = res.total;
            that.deviceList = that.deviceList.concat(res.data);
            console.log(that.deviceList);
          }
        },
      });
    },
    scroll(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    loadMore() {
      if (this.is_no_more) {
        return;
      }
      console.log("loadMore");
      this.page++;
      this.loadData();
    },
    changeStatus(item) {
      console.log(item);
      this.editItem = item;
      this.$refs.inputDialog.open();
      this.$nextTick(() => {
        console.log(item.status);
        this.editStatus = item.status + "";
      });
    },
  },
};
</script>
<style scoped lang="scss">
.tab {
  width: 100%;
  .line {
    height: 4rpx;
    width: 60rpx;
    margin: 10rpx auto 0;
  }
}
.device-list {
  background: #eff0f2;
  box-sizing: border-box;
  .device-list-scroll {
    height: calc(100vh - 380rpx);
  }
  .item {
    border-radius: 8px;
    overflow: hidden;
  }
  .item-head {
    border-bottom: 1px solid #eff0f2;
    padding: 10rpx 0 20rpx 0;
  }
  .item-info {
    padding: 20rpx 0;
    .item-info-item {
      border-radius: 10rpx;
      overflow: hidden;
    }
  }
  .item-status0 {
    color: #008000;
  }
  .item-status1 {
    color: #ff9900;
  }
  .item-status2 {
    color: #ff0000;
  }
  .item-status3 {
    color: #ff0000;
  }
  .item-btn {
    padding-bottom: 20rpx;
    display: flex;
    justify-content: flex-end;
    button {
      display: inline-block;
      margin: 0;
      background: #007aff !important;
      color: #fff;
    }
  }
}
.popup-content {
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  width: calc(100vw - 100rpx);
  .popup-content-head {
    padding: 20rpx;
    border-bottom: 1px solid #eff0f2;
    .popup-content-item-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .popup-content-item-title-text {
        font-size: 32rpx;
        color: #333;
        font-weight: normal;
      }
    }
  }
  .popup-content-body {
    padding: 20rpx;
    .popup-content-item-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    .popup-content-item-title-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .popup-content-item-title-item-label {
        font-size: 32rpx;
        color: #333;
        padding: 20rpx 0;
      }
    }
  }

  .popup-content-footer {
    padding: 20rpx 0;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eff0f2;
    button {
      display: inline-block;
      margin: 0;
      background: #007aff !important;
      color: #fff;
    }
  }
}
.device-total {
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}
.device-head {
  padding: 20rpx;

  .device-search {
    width: 100%;
  }
}
</style>

<style>
.uni-data-checklist .checklist-group .checklist-box.is--tag {
  background: #fff !important;
}
.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
  background: #007aff !important;
  color: #fff !important;
}
</style>
